MudBlazor - Blazor Component Library

Simple List

MudList is used to display a collection of items which can contain an avatar, an icon, text or custom content. If you want the component to be readonly set parameter ReadOnly to true. You can also use the list for navigation if you set parameter Href on its MudListItems. Use <MudDivider> to separate groups of items.

Because lists can manage a selected value of any type, you have to specify the type parameter T for the list and its items, even if you only use them for presentation purposes.

Inbox

Sent

Drafts

Trash

Removed e-mails

Spam

E-mails from common providers

<MudPaper Width="300px">
    <MudList T="string">
        <MudListItem Text="Inbox" Icon="@Icons.Material.Filled.Inbox" />
        <MudListItem Text="Sent" Icon="@Icons.Material.Filled.Send" />
        <MudListItem Text="Drafts" Disabled="true" IconColor="Color.Info" Icon="@Icons.Material.Filled.Drafts" />
        <MudDivider />
        <MudListItem Text="Trash" SecondaryText="Removed e-mails" />
        <MudListItem Text="Spam" SecondaryText="E-mails from common providers" />
    </MudList>
</MudPaper>

Nested List

To create a nested list with multiple levels of nesting use the <NestedList> render fragment of the <MudListItem>. The nested lists inherit all settings of the top-level list. To initialize the expansion state of a nested list set the Expanded parameter. You can also bind it to control the sub-list expansion state. This example also shows how to appropriate the <MudListSubheader> as a footer.

Nested List Items

Inbox

Starred

Snoozed

Sent mail

Re: Meeting tomorrow

Fwd: JavaScript memes xD

Drafts

"Sent mail" Expansion

<MudPaper Width="300px">
    <MudList T="string">
        <MudListSubheader>
            Nested List Items
        </MudListSubheader>
        <MudListItem Icon="@Icons.Material.Filled.Inbox" Text="Inbox" Expanded>
            <NestedList>
                <MudListItem Icon="@Icons.Material.Filled.StarRate">
                    Starred
                </MudListItem>
                <MudListItem Icon="@Icons.Material.Filled.WatchLater">
                    Snoozed
                </MudListItem>
            </NestedList>
        </MudListItem>
        <MudListItem Icon="@Icons.Material.Filled.Send" Text="Sent mail" @bind-Expanded="_expanded">
            <NestedList>
                <MudListItem>Re: Meeting tomorrow</MudListItem>
                <MudListItem>Fwd: JavaScript memes xD</MudListItem>
            </NestedList>
        </MudListItem>
        <MudListItem Icon="@Icons.Material.Filled.Drafts">
            Drafts
        </MudListItem>
        <MudDivider/>
        <MudListSubheader Class="mb-n3">
            <MudSwitch Color="Color.Primary" @bind-Value="_expanded">"Sent mail" Expansion</MudSwitch>
        </MudListSubheader>
    </MudList>
</MudPaper>

@code {
    bool _expanded;
}

Single-Selection

A <MudList> which has its SelectionMode set to either SelectionMode.SingleSelection or SelectionMode.ToggleSelection can be used to select a single value across all its nested lists. Use @bind-SelectedValue to manipulate the selected value or receive updates when the user selects a value.

Note: If you use the toggle selection and unselect the selected item the SelectedValue will become default(T). If that collides with a valid choice (i.e. 0 for type int) you should use a nullable type (i.e. T="int?").

The value of a <MudListItem> is defined either via its Text or its Value parameter. For T="string" setting only Text will suffice if the text you want to display is the same as the selectable value. If you set Value you can set a different display text with Text. The example below demonstrates this.

You can customize the selected item color via the Color parameter. If ReadOnly is set, the list will display the selected value but you can't change it.

Your drink:

Milk

Sparkling Water

Teas

English Tea

Chinese Tea

Bubble Tea

Coffees

Irish Coffee

Double Espresso

Cafe Latte

SingleSelection ToggleSelection

Milk

Carbonated H²O

Earl Grey

Gunpowder Tea

Bubble Tea

Irish Coffee

Double Espresso

Cafe Latte

ReadOnly

<MudPaper Width="300px">
<MudList T="string" @bind-SelectedValue="SelectedValue" SelectionMode="@SelectionMode" ReadOnly="@ReadOnly" Color="@Color.Info">
        <MudListSubheader>
            Your drink:
        <MudChip Color="@Color.Info">
            @(SelectedValue ?? "You are dry")
        </MudChip>
        </MudListSubheader>
        <MudListItem Text="Milk" />
        <MudListItem Text="Sparkling Water" Value='"Carbonated H²O"' />
        <MudListItem Text="Teas">
            <NestedList>
                <MudListItem Text="English Tea" Value='"Earl Grey"' />
                <MudListItem Text="Chinese Tea" Value='"Gunpowder Tea"' />
                <MudListItem Text="Bubble Tea" />
            </NestedList>
        </MudListItem>
        <MudListItem Text="Coffees">
            <NestedList>
                <MudListItem Text="Irish Coffee" />
                <MudListItem Text="Double Espresso" />
                <MudListItem Text="Cafe Latte" />
            </NestedList>
        </MudListItem>
    </MudList>
</MudPaper>

<MudStack Row Justify="Justify.Center" Style="width: 100%" Wrap="Wrap.Wrap">
    <MudRadioGroup @bind-Value="SelectionMode">
        <MudRadio Value="SelectionMode.SingleSelection" Color="Color.Primary">SingleSelection</MudRadio>
        <MudRadio Value="SelectionMode.ToggleSelection" Color="Color.Primary">ToggleSelection</MudRadio>
    </MudRadioGroup>
    <MudChipSet T="string" @bind-SelectedValue="SelectedValue" SelectionMode="@SelectionMode" Color="Color.Info" Variant="Variant.Text">
        <MudChip Text="Milk" />
        <MudChip Text="Carbonated H²O" />
        <MudChip Text="Earl Grey" />
        <MudChip Text="Gunpowder Tea" />
        <MudChip Text="Bubble Tea" />
        <MudChip Text="Irish Coffee" />
        <MudChip Text="Double Espresso" />
        <MudChip Text="Cafe Latte" />
    </MudChipSet>
    <MudSwitch @bind-Value="ReadOnly" Color="Color.Primary">ReadOnly</MudSwitch>    
</MudStack>

@code
{
    public string SelectedValue = "Milk";
    public SelectionMode SelectionMode = SelectionMode.SingleSelection;
    public bool ReadOnly;
}

Multiselection

<MudList> can also be used to select multiple values if the SelectionMode is set to SelectionMode.MultiSelection. To manipulate the selected values or to receive updates when the user changes the selection use @bind-SelectedValues (note the 's' at the end).

Select your favourite drinks:

Milk

Sparkling Water

Teas

English Tea

Chinese Tea

Bubble Tea

Coffees

Irish Coffee

Double Espresso

Cafe Latte

Milk

Carbonated H²O

Earl Grey

Gunpowder Tea

Bubble Tea

Irish Coffee

Double Espresso

Cafe Latte

ReadOnly

<MudPaper Width="300px">
    <MudList T="string" @bind-SelectedValues="SelectedValues" SelectionMode="SelectionMode.MultiSelection" ReadOnly="@ReadOnly" CheckBoxColor="Color.Tertiary">
        <MudListSubheader>
            Select your favourite drinks:
        </MudListSubheader>
        <MudListItem Text="Milk" />
        <MudListItem Text="Sparkling Water" Value='"Carbonated H²O"' />
        <MudListItem Text="Teas">
            <NestedList>
                <MudListItem Text="English Tea" Value='"Earl Grey"' />
                <MudListItem Text="Chinese Tea" Value='"Gunpowder Tea"' />
                <MudListItem Text="Bubble Tea" />
            </NestedList>
        </MudListItem>
        <MudListItem Text="Coffees">
            <NestedList>
                <MudListItem Text="Irish Coffee" />
                <MudListItem Text="Double Espresso" />
                <MudListItem Text="Cafe Latte" />
            </NestedList>
        </MudListItem>
    </MudList>
</MudPaper>

<MudStack Row Justify="Justify.Center" Style="width: 100%" Wrap="Wrap.Wrap">
    <MudChipSet T="string" @bind-SelectedValues="SelectedValues" SelectionMode="SelectionMode.MultiSelection" Color="Color.Tertiary" Variant="Variant.Text">
        <MudChip Text="Milk"/>
        <MudChip Text="Carbonated H²O"/>
        <MudChip Text="Earl Grey"/>
        <MudChip Text="Gunpowder Tea" />
        <MudChip Text="Bubble Tea" />
        <MudChip Text="Irish Coffee" />
        <MudChip Text="Double Espresso"/>
        <MudChip Text="Cafe Latte"/>
    </MudChipSet>
    <MudSwitch @bind-Value="ReadOnly" Color="Color.Info">ReadOnly</MudSwitch>    
</MudStack>

@code
{
    public IReadOnlyCollection<string> SelectedValues = ["Milk", "Cafe Latte"];
    public bool ReadOnly;
}

Lists

Simple List

Nested List

Single-Selection

Multiselection